<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div
      v-if="topNameFlag"
      style="
        display: flex;
        flex-direction: row;
        position: absolute;
        font-weight: bold;
        width: 100%;
      "
      :style="{
        top: topNameConfig.top,
        left: topNameConfig.left,
        right: topNameConfig.right,
        bottom: topNameConfig.bottom,
      }"
    >
      <div
        :style="{
          fontSize: topNameConfig.fontSize ? topNameConfig.fontSize : '18px',
          color: topNameConfig.color ? topNameConfig.color : '#ffffff',
        }"
        class="top_title"
      >
        <div class="topCname">{{ topNameConfig.name }}</div>
      </div>
    </div>
    <div style="width: 100%; height: 100%" ref="ech"></div>
  </div>
</template>
<script>
// 应用echarts主题
// import "echarts/theme/macarons.js";
import * as echarts from "echarts";
import { DUColor } from "@/assets/json/colors.js";

export default {
  title: "roundBar",
  data() {
    return {
      Echarts: null,
      title: "",
      value: 0,
      name: ["综合通过能力", "集装箱通过能力", "港口通过能力"],
      yname: ["沿海港口", "沿江港口", "内河港口"],
      seriesData: [],
      colors: [],
      gridData: {
        XYColor: "#fff",
        YSize: 12,
        XSize: 12,
        top: 40,
        right: 10,
        left: 10,
        bottom: 10,
        fontSize: 13,
        nameGap: 15,
        rotate: 0,
        lname: "",
        Rname: "",
        Xmin: null,
        Xmax: null,
        legendSize: 14,
        legendWidth: "auto",
        legendHeight: "auto",
        legendTop: "auto",
        legendLeft: "center",
        legendRight: "auto",
        legendBottom: "auto",
        legendOrient: "horizontal",
        interval: 0,
      },
      titleConfig: {
        text: "",
        textStyle: { color: "#fff" },
        left: "auto",
        top: "auto",
        right: "auto",
        bottom: "auto",
      },
      config: { grid: {}, legend: [], dataZoom: [] },
      // topNameConfig: {
      //   name: "",
      //   fontSize: "",
      //   color: "",
      //   top: "",
      //   left: "40%",
      //   right: "",
      //   bottom: "",
      // },
    };
  },
  props: {
    topVal: { type: String || Number, default: "30" },
    lineFlag: { type: String || Number, default: "10" },
    topNameFlag: { type: Boolean, default: false },
    topNameConfig: {
      type: Object,
      default: () => ({
        name: "1111",
        fontSize: "",
        color: "",
        top: "",
        left: "0%",
        right: "",
        bottom: "",
      }),
    },
  },
  mounted() {
    var that = this;
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      window.addEventListener("resize", () => {
        //重置容器高宽

        echarts.resize();
      });
    });
  },
  created() {},
  methods: {
    getRadomData(arryLength) {
      var arry = [];
      for (var i = 0; i < arryLength; i++) {
        arry.push(100 + Math.round(Math.random() * 300));
      }
      return arry;
    },
    drawEchart() {
      let flag = false;
      let names = this.seriesData.map((item) => item["type"]);
      let nameSet = new Set(names);
      if (nameSet.size > 1) {
        flag = true;
      }
      var option = {
        color: this.colors.legend > 0 ? this.colors : DUColor,
        title: this.titleConfig,
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(128, 128, 128, 0.8)",
          textStyle: { color: "#fff" },
          // axisPointer: {
          //   type: "cross",
          // },
          formatter: (params) => {
            if (params.length > 1) {
              let dataStr = `<div><div style="font-weight:bold;">${params[0].name}</div></div>`;
              params.forEach((item) => {
                dataStr += `<div>
                      <div style="margin: 0 8px;">
                        <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                          typeof item.color == "string"
                            ? item.color
                            : item.color.colorStops[0].color
                        };"></span>
                        <span>${item.seriesName}</span>
                        <span style="float:right;color:#ffffff;margin-left:20px;">${
                          item.value
                        }${
                  item.data && item.data.unit ? item.data.unit : ""
                }</span>
                      </div>
                    </div>`;
              });
              return dataStr;
            } else {
              let dataStr = `<div><div style="font-weight:bold;"><span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                typeof params[0].color == "string"
                  ? params[0].color
                  : params[0].color.colorStops[0].color
              };"></span>${
                params[0].name
              }<span style="float:right;color:#ffffff;margin-left:20px;">${
                params[0].value
              }${
                params[0].data && params[0].data.unit ? params[0].data.unit : ""
              }</span></div></div>`;
              return dataStr;
            }
          },
        },
        dataZoom: this.config.dataZoom,
        grid: {
          right: flag ? this.gridData.right : "1",
          ...this.gridData,
          containLabel: true,
        },
        legend: this.config.legend,
        xAxis: [
          {
            name: this.gridData.XName,
            type: "category",

            axisLabel: {
              showMinLabel: true,
              color: this.gridData.XYColor,
              fontSize: this.gridData.XSize,
              rotate: this.gridData.rotate,
              interval: this.gridData.interval, //使x轴文字显示全
            },
            data: this.yname,
            // min: this.gridData.Xmin,
            min: (value) => {
              return this.gridData.Xmin;
            },
            max: this.gridData.Xmax,
          },
        ],
        yAxis: [
          {
            name: this.gridData.lname,
            nameTextStyle: {
              color: this.gridData.XYColor,
              fontSize: this.gridData.fontSize,
            },
            nameGap: this.gridData.nameGap,
            type: "value",
            position: 0,
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: this.gridData.XYColor,
              fontSize: this.gridData.YSize,
              formatter: function (value) {
                var texts = JSON.stringify(value);
                if (texts.length > 5) {
                  // 具体多少字就看自己了
                  texts = texts.substr(0, 5) + "...";
                }
                return texts;
              },
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                // color: "#21213C",
                color: "rgba(190, 223, 249, 0.5)",
              },
            },
          },
          {
            name: this.gridData.Rname,
            nameTextStyle: {
              color: this.gridData.XYColor,
              fontSize: this.gridData.fontSize,
            },
            nameGap: this.gridData.nameGap,
            type: "value",
            position: 1,
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: this.gridData.XYColor,
              fontSize: this.gridData.YSize,
              formatter: function (value) {
                var texts = JSON.stringify(value);
                if (texts.length > 3) {
                  // 具体多少字就看自己了
                  texts = texts.substr(0, 3) + "...";
                }
                return texts;
              },
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                // color: "#21213C",
                color: "rgba(190, 223, 249, 0.5)",
              },
            },
          },
        ],
        series: this.seriesData,
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    },
  },
  beforeDestroy() {
    if (this.Echarts) {
      // 清除实例，释放资源
      this.Echarts.dispose();
      // 将实例设为null，避免潜在的内存泄漏
      this.Echarts = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.top_title {
  // background-image: url("~@/assets/images/jsgh/frame_hbyxqk@2x.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  padding: 5px 20px;
  width: 100%;
  text-align: center;
}
</style>
